<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row class="ml10" v-show="showSearch">
        <el-form :inline="true" :model="state.queryForm" ref="queryRef">
          <!--  任务名称 -->
          <el-form-item label="发布时间" prop="category">
            <el-select style="width: 200px" clearable="true" v-model="state.queryForm.dateRange" placeholder="请选择">
              <el-option
                  v-for="item in dateRangeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!--  任务名称 -->
          <el-form-item label="类型" prop="category">
            <el-select style="width: 250px" multiple="true" clearable="true" v-model="state.queryForm.category" placeholder="请选择">
              <el-option
                  v-for="item in categoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="类型" prop="type"> -->
          <el-form-item label="新闻" prop="title">
            <el-input @keyup.enter="getDataList" clearable v-model="state.queryForm.title" style="width: 300px" placeholder="请输入你想查询的热点" />
          </el-form-item>

          <el-form-item>
            <el-button @click="getDataList" icon="Search" type="primary">{{ $t('common.queryBtn') }} </el-button><!-- 查询 icon="Search" -->
            <el-button @click="reacquire" icon="Refresh">刷新</el-button><!-- 重置 -->
          </el-form-item>
        </el-form>
      </el-row>

      <el-row>
        <div class="mb8" style="width: 100%">
          <!-- 新增 -->
          <!-- <el-button v-auth="'job_sys_job_add'" @click="formDialogRef.openDialog()" class="ml10" icon="folder-add" type="primary">
            {{ $t('common.addBtn') }}
          </el-button>-->
          <!-- 删除 -->
          <!-- <el-button plain v-auth="'job_sys_job_del'" :disabled="multiple" @click="handleDelete(undefined)" class="ml10" icon="Delete" type="primary">
            {{ $t('common.delBtn') }}
          </el-button>-->
          <!-- 表格右上角按钮
          <right-toolbar
              :export="'job_sys_job_add'"
              @exportExcel="exportExcel"
              @queryTable="getDataList"
              class="ml10"
              style="float: right; margin-right: 20px"
              v-model:showSearch="showSearch"
          />-->
        </div>
      </el-row>
      <!-- border -->
      <el-table
          :data="state.dataList"
          style="width: 100%"
          v-loading="state.loading"
          :cell-style="tableStyle.cellStyle"
          :header-cell-style="tableStyle.headerCellStyle"
      >
<!--        <el-table-column label="ID" fixed="left" prop="id" />-->
        <el-table-column label="类型" fixed="left" prop="category" width="200" >
          <template #default="scope">
            <el-tag :type="convertToType(scope.row.category)">{{ scope.row.category }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="标题" fixed="left" prop="title" align="left"  >
          <template #default="scope">
            <div style="text-align: left;">{{ scope.row.title }}</div>
          </template>
        </el-table-column>
<!--        <el-table-column label="内容" fixed="left" prop="subTitle" align="left"  >
          <template #default="scope">
            <div style="text-align: left;">{{ scope.row.subTitle }}</div>
          </template>
        </el-table-column>-->
        <el-table-column label="发布时间" fixed="left" prop="createTime" width="200" />
        <el-table-column :label="$t('common.action')" show-overflow-tooltip width="250">
          <template #default="scope">
            <el-button icon="reading" @click="openNews(scope.row)" text type="primary" v-auth="'sys_menu_add'">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
    </div>
  </div>
</template>

<script lang="ts" name="systemSysJob" setup>
import { BasicTableProps, useTable } from '/@/hooks/table';
import { getPageNewsList, flushNewsList } from '/@/api/admin/newsList/newsList';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';
import { useI18n } from 'vue-i18n';


const categoryOptions = [
  { label: '财经', value: '财经' },
  { label: '百度热搜', value: '百度热搜' },
  { label: '编程', value: '编程' },
  { label: '篮球热点', value: '篮球热点' },
  { label: '娱乐新闻', value: '娱乐新闻' },
  { label: '今日热点汇总', value: '今日热点汇总' },
]

// 今天，本周，本月，本季度，本年度
const dateRangeOptions = [
  { label: '今天', value: '今天' },
  { label: '本周', value: '本周' },
  { label: '本月', value: '本月' },
  { label: '本季度', value: '本季度' },
  { label: '本年度', value: '本年度' },
]

// 获取国际化方法
const { t } = useI18n();

// 获取每种新闻的最新新闻
const reacquire = async () => {
  // 刷新新闻
  const res = await flushNewsList();
}

/** 是否展示搜索表单 */
const showSearch = ref(true);

/** 表格状态变量 */
const state = reactive<BasicTableProps>({
  pageList: getPageNewsList,
});

/** 获取表格数据方法 */
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 打开编辑窗口
const openNews = (row:any) => {
  window.open(row.url);
};

const convertToType = (str: string) => {
  switch (str) {
    case '财经':
      return 'success';
    case '百度热搜':
      return '';
    case '篮球热点':
      return 'warning';
    case '编程':
      return 'danger';
    case '今日热点汇总':
      return 'danger';
    default:
      return '';
  }
}

</script>
